<template>
  <view class="course-card" @tap="goToDetail">
    <view class="course-image">
      <image :src="course.image" mode="aspectFill"></image>
      <view class="course-tag" v-if="course.tag">
        <text>{{ course.tag }}</text>
      </view>
      <view class="course-duration">
        <uni-icons type="videocam" size="12" color="#fff"></uni-icons>
        <text>{{ course.duration || '0小时' }}</text>
      </view>
    </view>
    
    <view class="course-info">
      <view class="course-title">{{ course.title }}</view>
      <view class="course-desc">{{ course.description }}</view>
      
      <view class="course-meta">
        <view class="course-teacher">
          <image :src="course.teacherAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
          <text>{{ course.teacherName }}</text>
        </view>
        <view class="course-students">
          <uni-icons type="person" size="14" color="#999"></uni-icons>
          <text>{{ course.students || 0 }}人学习</text>
        </view>
      </view>
      
      <view class="course-bottom">
        <view class="course-price">
          <text class="price-current">¥{{ course.price || 0 }}</text>
          <text class="price-original" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
        </view>
        <view class="course-rating">
          <uni-icons type="star-filled" size="14" color="#ffca3a"></uni-icons>
          <text>{{ course.rating || 5.0 }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CourseCard',
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  methods: {
    goToDetail() {
      uni.navigateTo({
        url: `/pages/courses/detail?id=${this.course.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.course-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.course-image {
  position: relative;
  width: 100%;
  height: 200rpx;
}

.course-image image {
  width: 100%;
  height: 100%;
}

.course-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}

.course-duration {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.course-info {
  padding: 30rpx;
}

.course-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.course-teacher {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.course-teacher image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

.course-teacher text {
  font-size: 24rpx;
  color: #666;
}

.course-students {
  display: flex;
  align-items: center;
  gap: 5rpx;
  font-size: 24rpx;
  color: #999;
}

.course-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.course-price {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.price-current {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.price-original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.course-rating {
  display: flex;
  align-items: center;
  gap: 5rpx;
  font-size: 24rpx;
  color: #ffca3a;
}
</style>